<style lang="scss">
  .wrap {
    padding-bottom: 0.5rem;

    .list-content {
      .content-li {
        width: 100%;
        // margin: 0 0 10px;
        background-color: #ffffff;
        .cover {
          position: relative;
          .link {
            display: block;
            width: 100%;
            padding-top: 57.6%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
          }
          .cover-img {
            width: 100%;
            height: 100%;
          }
          .info {
            position: absolute;
            bottom: 10px;
            padding: 0 10px;
            font-size: 16px;
            font-weight: 600;
            color: #ffffff;
            text-shadow: 1px 1px 4px #000000;
            .text-title {
              overflow: hidden;
            }
            .text-ctn {
              overflow: hidden;
              font-size: 12px;
              font-weight: normal;
            }
          }
          .gonglv {
            width: 25%;
            height: 50px;
            line-height: 35px;
            position: absolute;
            right: 0;
            top: 10px;
            .wantToGo-praise {
              display: block;
              width: 49%;
              height: 50px;
              color: #ffffff;
              text-align: center;
              float: left;
              margin-top: 5px;
              .icon-wantToGo {
                width: 24px;
                height: 24px;
                margin: 0 auto;
                background: url()
                no-repeat;
                background-size: 100% 100%;
              }
            }
            .been-praise {
              display: block;
              width: 49%;
              height: 50px;
              margin-left: 50%;
              color: #ffffff;
              text-align: center;
              margin-top: 5px;
              .icon-been {
                width: 24px;
                height: 24px;
                margin: 0 auto;
                background: url()
                no-repeat;
                background-size: 100% 100%;
              }
            }
          }
        }
        .list-mask {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 30%;
          background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(255, 255, 255, 0) 100%
          );
        }
      }
    }
  }

</style>
<template>
  <view class="wrap">
    <view class="list-content">
      <view class="content-li"  v-for="(item,index) in poster_data.list" :key="index">
        <view class="cover">
          <!-- style="background-image:url('{{item.thumb}}')" -->
          <!-- style="background-image:url({{item.thumb}})" -->
          <navigator class="link" :url="'/pages/poster/detail?id='+item.id" :style="{backgroundImage:'url('+ item.thumb +')'}"   >
            <view class="list-mask"></view>
            <!-- <image class="lazy cover-img" src="{{item.thumb}}"> </image> -->
            <view class="info">
              <view class="text-title">{{item.title}}</view>
            </view>
          </navigator>
<!--          <view class="gonglv">-->
<!--            <view class="wantToGo-praise">-->
<!--              <view class="icon-wantToGo"></view>-->
<!--              <text class="wantToGo-text">4</text>-->
<!--            </view>-->
<!--            <view  class="been-praise" >-->
<!--              <view class="icon-been"></view>-->
<!--              <text class="been-text">3</text>-->
<!--            </view>-->
<!--          </view>-->

        </view>
      </view>
    </view>

  </view>


</template>
<script>
import { pageMixin } from '@/mixins'
import { error } from '@/common/fun'
import { poster } from '@/api'

export default {
  mixins: [pageMixin],
  data () {
    return {
      lists: [],
      poster_data: {
        select_type_id: 1,
        types: [],
        page: 1,
        isFinish: false,
        list: []
      }
    }
  },
  methods: {
    loadFunc (cb) {
      const self = this

      if (self.poster_data.isFinish) {
        error('到底啦')
        return
      }

      const params = {
        paginate: 1,
        page: self.poster_data.page
      }
      poster(params, { tip: 'loading' }).then(res => {
        cb && cb(res.data)
      })
    },
    async _init_func () {

    }
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom () {
    const self = this
    self.loadFunc(function (res) {
      var list = self.poster_data.list.concat(res.data)
      self.poster_data.list = list
      self.lists = list

      // 分页的33
      if (parseInt(res.current_page) < res.last_page) {
        self.poster_data.page = parseInt(res.current_page) + 1
      } else {
        self.poster_data.isFinish = true
      }
    })
  },
  onLoad () {
    var self = this

    self.loadFunc(function (res) {
      var list = self.poster_data.list.concat(res.data)
      self.poster_data.list = list
      self.lists = list
      // 分页的2
      if (parseInt(res.current_page) < res.last_page) {
        self.poster_data.page = parseInt(res.current_page) + 1
      } else {
        self.poster_data.isFinish = true
      }
    })
  },
  onShareAppMessage () {
    // let userInfo = wx.getStorageSync('userInfo'),path = '/pages/map/deatil?id='+this.map.id;
    //
    // //加入分享标识
    // if(userInfo && userInfo.id){
    //   path = path + '&from_mid=' + userInfo.id
    // }
    //
    return {
      title: '自定义海报'
      // imageUrl: this.map.thumb || wx.state.logo,
      // path: path
    }
  }
}
</script>
